<script setup>
import {reactive} from 'vue';
import {useRouter} from 'vue-router'
import {CodepenCircleOutlined} from "@ant-design/icons-vue";
import {notification} from 'ant-design-vue';
import userApi from '../api/userApi';
import { useUserStore } from '@/stores/user';
const { setUserInfo } = useUserStore()

const router = useRouter();

const loginForm = reactive({
  mobile: '13600000000',
  code: '',
});
const onFinish = async (value) => {
  // 执行登录逻辑
  const respData = await userApi.login(value);
  const data = respData.data
  setUserInfo(data)
  console.log('Success:', value, data);
  notification.success({ description: '登录成功！' });
  router.push("/welcome");
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

const sendCode = async () => {
  await userApi.sendCode({
    mobile: loginForm.mobile
  })
  notification.success({ description: '发送验证码成功！' });
  loginForm.code = "8888";
}
</script>

<template>
  <a-row class="login">
    <a-col :span="8" :offset="8" class="login-main">
      <h1 style="text-align: center">
        <CodepenCircleOutlined/>&nbsp;模拟12306售票系统
      </h1>
      <a-form
          :model="loginForm"
          name="basic"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            label=""
            name="mobile"
            :rules="[{ required: true, message: '请输入手机号!' }]"
        >
          <a-input v-model:value="loginForm.mobile" placeholder="手机号"/>
        </a-form-item>

        <a-form-item
            label=""
            name="code"
            :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <a-input v-model:value="loginForm.code">
            <template #addonAfter>
              <a @click="sendCode">获取验证码</a>
            </template>
          </a-input>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>

</template>

<style scoped>
.login-main h1 {
  font-size: 25px;
  font-weight: bold;
}

.login-main {
  margin-top: 100px;
  padding: 30px 30px 20px;
  border: 2px solid grey;
  border-radius: 10px;
  background-color: #fcfcfc;
}
</style>